<template>
  <div class="mod-schedule">
    <el-card class="header">
      <el-form
        :inline="true"
        :model="dataForm"
        @keyup.enter.native="getDataList()"
      >
        <el-form-item label="双向交互名称:">
          <el-input
            v-model="dataForm.tempName"
            placeholder="请输入双向交互名称"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item label="创建人:">
          <el-input
            v-model="dataForm.createUserName"
            placeholder="请输入创建人"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item label="分公司:">
          <el-select v-model="dataForm.latnId" placeholder="请选择" clearable>
            <el-option
              v-for="item in cityList"
              :key="item.cityId"
              :label="item.cityName"
              :value="item.cityId"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" @click="search()"
            >查询</el-button
          >
        </el-form-item>
        <el-form-item style="float: right">
          <el-button type="success" @click="addOrUpdateHandle()"
            >新增</el-button
          >
          <el-button
            type="danger"
            @click="deleteHandle()"
            :disabled="dataListSelections.length <= 0"
            >批量删除</el-button
          >
        </el-form-item>
      </el-form>
    </el-card>
    <el-card class="header" style="margin-top: 10px">
      <el-table
        :data="dataList"
        border
        v-loading="loading"
        element-loading-text="拼命加载中"
        element-loading-spinner="el-icon-loading"
        element-loading-background="rgba(12,42,98, 0.9)"
        @selection-change="selectionChangeHandle"
        style="width: 100%"
      >
        <el-table-column
          type="selection"
          header-align="center"
          align="center"
          width="50"
        >
        </el-table-column>
        <el-table-column
          prop="tempName"
          header-align="center"
          align="center"
          label="双向交互页面名称"
        >
        </el-table-column>
        <el-table-column
          prop=""
          header-align="center"
          align="center"
          label="预览图"
        >
          <template slot-scope="scope">
            <!-- <iframe id="mainIframe" style="width:100%;height:20%" name="mainIframe" src="http://134.64.251.212:8084/cpcp/htmlUrl/测试0530-3.html?imgUrls=http://134.64.251.212:8084/cpcp/htmlUrl/du_bg.png" frameborder="0" scrolling="auto"></iframe> -->
            <!-- src="http://134.64.251.212:8084/cpcp/htmlUrl/du_bg.png" -->
            <img
              :src="scope.row.imgUrls === '' ? 'http://134.64.251.212:8084/cpcp/htmlUrl/du_bg.png' : scope.row.imgUrls"
              alt=""
              srcset=""
              style="width: 20px; height: 20px"
              @click="ShowpreviewPic(scope.row)"
            />
          </template>
        </el-table-column>
        <el-table-column
          prop="createNo"
          header-align="center"
          align="center"
          label="编号"
        >
        </el-table-column>
        <el-table-column
          prop="latnId"
          header-align="center"
          align="center"
          label="分公司"
        >
        </el-table-column>
        <el-table-column
          prop="createUserName"
          header-align="center"
          align="center"
          label="创建人"
        >
        </el-table-column>
        <el-table-column
          prop="createTime"
          header-align="center"
          align="center"
          label="创建时间"
        >
        </el-table-column>
        <el-table-column
          prop="remark"
          header-align="center"
          align="center"
          label="备注"
        >
        </el-table-column>
        <el-table-column
          prop="state"
          header-align="center"
          align="center"
          label="状态"
        >
          <template slot-scope="scope">
            <span
              v-if="scope.row.state === 0"
              size="small"
              style="color: #e10a0a"
              >禁用中</span
            >
            <span v-else size="small" type="danger" style="color: aqua"
              >启用中</span
            >
          </template>
        </el-table-column>
        <el-table-column
          header-align="center"
          align="center"
          width="230"
          label="操作"
        >
          <template slot-scope="scope">
            <el-button
              type="primary"
              size="small"
              @click="addOrUpdateHandle(scope.row)"
              >编辑</el-button
            >
            <el-button
              type="success"
              size="small"
              @click="pauseHandle(scope.row.id, 1)"
              v-if="scope.row.state === 0"
              >启用</el-button
            >
            <el-button
              type="button_tow"
              size="small"
              @click="pauseHandle(scope.row.id, 0)"
              v-if="scope.row.state === 1"
              >禁用</el-button
            >
            <el-button
              type="danger"
              size="small"
              @click="deleteHandle(scope.row.id)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        @size-change="sizeChangeHandle"
        @current-change="currentChangeHandle"
        :current-page="pageIndex"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="pageSize"
        :total="totalPage"
        layout="total, sizes, prev, pager, next, jumper"
      >
      </el-pagination>
    </el-card>
    <eachOtherAdd ref="eachOtherAdd" @refEach="getDataList()"></eachOtherAdd>
    <interactiveViewTow
      ref="interactiveViewTow"
      @refEachOther="getDataList()"
    ></interactiveViewTow>
    <!-- 图片预览   放在表格外面，这是个弹出框-->
    <el-dialog
      :visible.sync="lookdialogVisible"
      :modal="false"
      title="图片预览"
      width="25%"
    >
      <!-- <img src="../../../assets/courseImg/yulan.png" alt="" style="width:100%;height:100%" /> -->
      <!-- <img src="http://134.64.251.212:8084/cpcp/htmlUrl/测试0530-3.html?imgUrls=http://134.64.251.212:8084/cpcp/htmlUrl/du_bg.png" alt="" style="width:100%;height:100%" /> -->
      <div class="iframe_box">
        <!-- <iframe id="mainIframe" name="mainIframe" src="http://134.64.251.212:8084/cpcp/htmlUrl/%E6%B5%8B%E8%AF%950601-1.html?imgUrls=http://134.64.251.212:8084//cpcp/imgUrl/daoshanjiao.jpg" frameborder="0" ></iframe> -->
        <iframe id="mainIframe" name="mainIframe" :src="previewpic" frameborder="0" ></iframe>
      </div>
    </el-dialog>
  </div>
</template>
  
<script>
import eachOtherAdd from "./eachOther-add";
import interactiveViewTow from "./interactiveViewTow.vue";
export default {
  data() {
    return {
      url: "../../../assets/imtTow/5.png",
      lookdialogVisible: false,
      previewpic: "",
      dataForm: {
        tempName: "",
        createUserName: "",
        latnId: "",
      },
      dataList: [], //表格数据
      cityList: [], //地市数据
      pageIndex: 1,
      pageSize: 10,
      totalPage: 0,
      loading: false,
      dataListSelections: [],
      addOrUpdateVisible: false,
      logVisible: false,
    };
  },
  components: {
    eachOtherAdd,
    interactiveViewTow,
  },
  activated() {
    this.getDataList();
    this.getCity();
  },
  methods: {
    //查询
    search() {
      this.pageIndex = 1;
      this.getDataList();
    },
    // 获取数据列表
    getDataList() {
      this.loading = true;
      // return
      this.$http({
        url: this.$http.adornUrl("/htmlTemp/list"),
        method: "get",
        params: this.$http.adornParams({
          page: this.pageIndex,
          limit: this.pageSize,
          tempName: this.dataForm.tempName,
          createUserName: this.dataForm.createUserName,
          latnId: this.dataForm.latnId,
        }),
      }).then(({ data }) => {
        if (data && data.code === 0) {
          setTimeout(() => {
            this.loading = false;
            this.dataList = data.page.list;
            this.totalPage = data.page.totalCount;
          }, 1000);
        } else {
          this.$message.error(data.msg);
          this.dataList = [];
          this.totalPage = 0;
        }
        // this.dataListLoading = false
      });
    },
    //城市下拉框数据/htmlTemp/getCity
    getCity() {
      this.$http({
        url: this.$http.adornUrl("/htmlTemp/getCity"),
        method: "get",
        params: this.$http.adornParams({}),
      }).then(({ data }) => {
        if (data && data.code === 0) {
          console.log("data===", data);
          this.cityList = data.data;
        } else {
          this.cityList = [];
          this.$message.error(data.msg);
          // this.dataList = [];
          // this.totalPage = 0;
        }
        // this.dataListLoading = false
      });
    },
    //禁用/重启
    pauseHandle(id, state) {
      console.log("obj===", id, state);
      // return
      this.$http({
        url: this.$http.adornUrl("htmlTemp/update"),
        // url: this.$http.adornUrl(`/htmlTemp/${this.dataObj.id === 0 ? 'save' : 'update'}`),
        method: "post",
        data: this.$http.adornData({
          id: id,
          state: state,
        }),
      }).then(({ data }) => {
        if (data && data.code === 0) {
          this.$message.success("操作成功");
          this.getDataList();
        } else {
          this.$message.error(data.msg);
        }
      });
    },
    // 每页数
    sizeChangeHandle(val) {
      this.pageSize = val;
      this.pageIndex = 1;
      this.getDataList();
    },
    // 当前页
    currentChangeHandle(val) {
      this.pageIndex = val;
      this.getDataList();
    },
    // 多选
    selectionChangeHandle(val) {
      this.dataListSelections = val;
    },
    // 新增 / 修改
    addOrUpdateHandle(data) {
      // this.addOrUpdateVisible = true;
      // this.$nextTick(() => {
      //   this.$refs.eachOtherAdd.init(data);
      // });
      this.$nextTick(() => {
        this.$refs.interactiveViewTow.init(data);
      });
    },
    // 删除
    deleteHandle(id) {
      var ids = id
        ? [id]
        : this.dataListSelections.map((item) => {
            return item.id;
          });
      this.$confirm(
        `确定对[id=${ids.join(",")}]进行[${id ? "删除" : "批量删除"}]操作?`,
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      )
        .then(() => {
          this.$http({
            url: this.$http.adornUrl("/htmlTemp/delete"),
            method: "post",
            data: this.$http.adornData(ids, false),
          }).then(({ data }) => {
            if (data && data.code === 0) {
              this.$message({
                message: "操作成功",
                type: "success",
                duration: 1500,
                onClose: () => {
                  this.getDataList();
                },
              });
            } else {
              this.$message.error(data.msg);
            }
          });
        })
        .catch(() => {});
    },
    //预览大图
    ShowpreviewPic(obj) {
      // let url = '~@/assets/imtTow/5.png'
      console.log("url=", obj);
      this.previewpic = obj.tempUrl + "?imgUrls=" + obj.imgUrls;
      console.log("this.previewpic===",this.previewpic);
      // this.previewpic = this.url;
      // this.previewpic = `http://134.64.251.212:8084/cpcp/htmlUrl/测试0530-3.html?imgUrls=http://134.64.251.212:8084/cpcp/htmlUrl/du_bg.png`;
      this.lookdialogVisible = true;
    },
  },
};
</script>
<style>
.el-button--button_tow {
  background-color: rgb(230, 162, 60) !important;
  border-color: rgb(230, 162, 60) !important;
  color: #fff;
}
/* /移入时按钮样式type='button_tow' */
.el-button--button_tow:hover {
  /* background: #fff !important; */
  /* border-color: #45a3fc !important; */
  color: #fff !important;
  /* opacity: 0.8; */
}

</style>
<style scoped>
.iframe_box{
      /* overflow-y: scroll; */
      height:110vh;
      width: 100%;
      background: white;
    }
#mainIframe{
      height: 100%;
      width: 100%;
      /* pointer-events: unset; */
      pointer-events: none;
    }
</style>
  